<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.myBorder{
				width: 80%;
				min-height: 50px;
				margin: 5px auto;
				padding: 5px;
				border: 1px solid red;
			}
			.cla1{
				color: red
			}
			.cla2{
				font-size: 32px;
			}
		</style>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="myBorder" :class="{cla1:f1,cla2:f2}">
				方式1 v-bind:class="{class名称1:true/false,class名称2:true/false}"<br />
				f1:{{f1}}<br  />
				f2:{{f2}}<br  />
			</div>
			<div class="myBorder" :class="objCla">
				方式2 v-bind:class="data中的对象"<br />
				objCla:{{objCla}}<br  />
			</div>
			<div class="myBorder" :class="objCom">
				方式3 v-bind:class="计算属性返回一个对象"<br />
				objCom:{{objCom}}<br  />
			</div>
			<div class="myBorder" :class="[c1,c2]">
				方式4 v-bind:class="[data中的数据]"<br />
				[c1,c2]:{{[c1,c2]}}<br  />
			</div>
			<div class="myBorder" :class="[c1,f2?c2:'']">
				方式5 v-bind:class="[data中的数据]"<br />
				f2:==>{{f2}}<br />
				[c1,f2?c2:'']:{{[c1,f2?c2:'']}}<br  />
			</div>
			<div class="myBorder" :class="arrCla">
				方式6 v-bind:class="arrCla"<br />
				arrCla:{{arrCla}}<br  />
			</div>
			<div class="myBorder" :class="arrCom">
				方式7 v-bind:class="arrCom"<br />
				arrCom:{{arrCom}}<br  />
			</div>
			<br  />
			<br  />
			<br  />
			<div class="myBorder" :style="{color:myC1,fontSize:myFs+'px'}" >
				方式8 v-bind:style="{属性名1:data中的值,属性名1:data中的值}"<br />
				myC1:{{myC1}}<br  />
				myFs:{{myFs}}<br  />
			</div>
			<div class="myBorder" :style="objSty" >
				方式9 v-bind:style="objSty"<br />
				objSty:{{objSty}}<br  />
			</div>
			<div class="myBorder" :style="objStyCom" >
				方式10 v-bind:style="objStyCom"<br />
				objStyCom:{{objStyCom}}<br  />
			</div>
			<div class="myBorder" :style="[objStyCom]" >
				方式11 v-bind:style="[objStyCom]"<br />
				objStyCom:{{[objStyCom]}}<br  />
			</div>
		</div>
		<script>
			var app=new Vue({
				el:"#app",
				data:{
					f1:Math.random()>=0.5?true:false,
					f2:Math.random()>=0.5?true:false,
					objCla:{
						cla1:Math.random()>=0.5?true:false,
						cla2:Math.random()>=0.5?true:false
					},
					c1:"cla1",
					c2:"cla2",
					arrCla:["cla1","cla2"],
					myC1:"red",
					myFs:32,
					objSty:{
						color:"red",
						fontSize:"32px"
					}
				},
				methods:{
					
				},
				computed:{
					objCom(){
						return {
							cla1:Math.random()>=0.5?true:false,
							cla2:this.f2
						}
					},
					arrCom(){
						return [this.c1,this.c2]
					},
					objStyCom(){
						return this.objSty;
					}
				}
			});
		</script>
	</body>
</html>
